<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Shiseido 企业微信员工验证</title>
		<meta content="width=device-width,user-scalable=no" name="viewport">
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		html,
		body {
			width: 100%;
			height: 100%
		}
		
		html,
		span,
		button,
		input {
			font-family: SourceHanSansCN-Regular
		}
		
		button {
			outline: none;
			border-radius: 5px;
			border: none;
			border: 1px solid #969696
		}
		
		.header {
			width: 100%;
			overflow: hidden;
			position: relative;
		}
		
		.header img {
			width: 100%
		}
		
		.header span {
			height: 50px;
			display: block;
			position: absolute;
			margin: auto;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			color: #FFFFFF;
			font-size: 25px;
		}
		
		.section {
			box-sizing: border-box;
			width: 100%;
			margin-top: 65px;
			padding: 0 30px;
		}
		
		.section input {
			border: 1px solid #969696;
			height: 40px;
			width: 100%;
			text-align: center;
			color: #969696;
			outline: none;
			border-radius: 5px;
		}
		
		.section button {
			background: #F2A1B0;
			margin-top: 25px;
			height: 40px;
			color: #FFFFFF;
			font-size: 15px;
			letter-spacing: 20px;
			width: 100%;
			border: none;
			outline: none;
			border-radius: 5px;
		}
		
		.section .disabled {
			background: #969696
		}
		
		.section .tips {
			margin-top: 20px;
			text-align: center;
			color: #969696;
			font-size: 10px;
			line-height: 18px
		}
		
		.section .tips span {
			display: block
		}
		
		.cover {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: #000000;
			opacity: 0.3;
			z-index: 2;
			display: none;
		}
		
		.failed {
			width: 300px;
			height: 225px;
			background: #FFFFFF;
			position: fixed;
			margin: auto;
			left: 0;
			right: 0;
			top: 20%;
			border-radius: 5px;
			z-index: 4;
			box-sizing: border-box;
			padding: 0 35px;
			display: none;
		}
		
		.failed .failInfo {
			text-align: center;
			line-height: 70px;
			border-bottom: 1px solid #969696;
			color: #323232;
			font-size: 18px;
		}
		
		.failed .failTip {
			margin-top: 36px;
			text-align: center;
			font-size: 13px;
			color: #969696;
		}
		
		.failed button {
			margin-top: 40px;
			width: 100%;
			height: 40px;
			background: #F2A1B0;
			color: #FFFFFF;
			font-size: 15px
		}
		
		.error {
			width: 300px;
			background: #FFFFFF;
			position: fixed;
			margin: auto;
			left: 0;
			right: 0;
			top: 20%;
			border-radius: 5px;
			z-index: 4;
			box-sizing: border-box;
			padding: 0 35px;
			padding-bottom: 15px;
			display: none;
		}
		
		.error .errorInfo {
			text-align: center;
			line-height: 70px;
			border-bottom: 1px solid #969696;
			color: #323232;
			font-size: 18px;
		}
		
		.error .errorTip {
			margin-top: 36px;
			text-align: center;
			font-size: 13px;
			color: #969696;
		}
		
		.error button {
			margin-top: 40px;
			width: 100%;
			height: 40px;
			background: #F2A1B0;
			color: #FFFFFF;
			font-size: 15px;
		}
		
		.ensure {
			width: 300px;
			height: 300px;
			background: #FFFFFF;
			position: fixed;
			margin: auto;
			left: 0;
			right: 0;
			top: 20%;
			border-radius: 5px;
			z-index: 4;
			box-sizing: border-box;
			padding: 0 30px;
			display: none;
		}
		
		.ensure .ensureInfo {
			text-align: center;
			line-height: 70px;
			border-bottom: 1px solid #969696;
			color: #323232;
			font-size: 18px;
		}
		
		.ensure .ensureTitle {
			text-align: center;
			color: #969696;
			margin-top: 20px;
			font-size: 13px;
		}
		
		.ensure .ensureContent {
			text-align: center;
			margin-top: 8px;
			font-size: 15px;
			margin-bottom: 25px;
			color: #323232;
		}
		
		.ensure button {
			width: 118px;
			float: left;
			height: 40px;
			background: #F2A1B0;
			font-size: 15px;
			color: #FFFFFF;
		}
		
		.ensure .return {
			float: right;
			background: #FFFFFF;
			color: #969696;
		}
	</style>

	<body>
		<div class='header'>
			<img src='static/images/1542619052972.png' />
			<span>员工号验证</span>
		</div>
		<div class='section'>
			<input class="staffCode" type='text' placeholder='请填写员工号(例: 000555)' />
			<button class='login'>登录</button>
			<div class='tips'>
				<span>*点击登录后，一分钟只能输入2次*</span>
				<span>达到2次，两分钟内登录按钮不可用</span>
			</div>
		</div>
		<div class='cover'></div>
		<div class='failed'>
			<div class='failInfo'>信息有误</div>
			<div class='failTip'>您输入的员工号有误，请重新输入</div>
			<button class="close" onclick="failHide()">返回</button>
		</div>
		<div class='error'>
			<div class='errorInfo'>提示</div>
			<div class='errorTip'></div>
			<button class="closeError" onclick="errorHide()">返回</button>
		</div>
		<div class='ensure'>
			<div class='ensureInfo'>信息确认</div>
			<div class='ensureTitle'>商店名称</div>
			<div class='ensureContent storeName'></div>
			<div class='ensureTitle'>员工姓名</div>
			<div class='ensureContent staffName'></div>
			<button class="confirm">确认</button>
			<button class='return' onclick="ensureHide()">返回</button>
		</div>
		<script type="text/javascript" src="publicjs/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="publicjs/smallkingutil.js"></script>
		<script src="publicjs/smallkingutil.js" charset="utf-8"></script>
		<script>
			function failShow() {
				$('.cover').show();
				$('.failed').show();
			}

			function failHide() {
				$('.cover').hide();
				$('.failed').hide();
			}

			function errorShow(n) {
				$('.cover').show();
				$('.error').show();
				$('.errorTip').text(n);
			}

			function errorHide() {
				$('.cover').hide();
				$('.error').hide();
			}

			function ensureShow(n, m) {
				$('.cover').show();
				$('.storeName').text(n);
				$('.staffName').text(m);
				$('.ensure').show();
			}

			function ensureHide() {
				$('input').val('');
				$('.cover').hide();
				$('.ensure').hide();
			}
			$(function() {
				commonUtil.setMaxLength(40);
				setTimeout(
					function() {
						errorShow('页面已过期，请关闭当前页面并重新进入');
						$('.closeError').hide()
						return;
					},
					298000
				);
				var count = 0;
				$('.login').click(function() {
					var staffCode = '';
					var num = 0;
					staffCode = $('.staffCode').val();
					if(staffCode && staffCode.length > 0) {
						num = sessionStorage.getItem('num');
						sessionStorage.setItem('staffCode', staffCode);
						if(num) {
							count = num
						}
						$.ajax({
							url: commonUtil.domain() + '/admin/wxwork/staff/code',
							type: 'post',
							data: {
								staffCode: staffCode
							},
							success: function(data) {
								if(data.code == 200) {
									count++;
									sessionStorage.setItem('num', count);
									ensureShow(data.data.shortName, data.data.name);
									if(count == 2) {
										$('.login').css('background', '#969696').attr('disabled', 'true');
										setTimeout(
											function() {
												$('.login').css('background', '#F2A1B0').removeAttr('disabled');
												sessionStorage.setItem('num', 0);
											},
											120000
										);
									} else if(count == 1) {
										sessionStorage.setItem('num', count);
										setTimeout(
											function() {
												sessionStorage.setItem('num', 0);
											},
											60000
										);
									}
								} else {
									count++;
									sessionStorage.setItem('num', count);
									failShow();
									if(count == 2) {
										$('.login').css('background', '#969696').attr('disabled', 'true');
										setTimeout(
											function() {
												$('.login').css('background', '#F2A1B0').removeAttr('disabled');
											},
											120000
										);
									} else if(count == 1) {
										sessionStorage.setItem('num', count);
										setTimeout(
											function() {
												sessionStorage.setItem('num', 0);
											},
											60000
										);
									}
								}
							}
						})
					} else {
						errorShow('员工号不能为空')
					}
				})
				$('.confirm').click(function() {
					ensureHide();
					var staffCode = sessionStorage.getItem('staffCode');
					var code = commonUtil.getRequestParam("code");
					$.ajax({
						url: commonUtil.domain() + '/admin/wxwork/staff/verify',
						type: 'post',
						data: {
							staffCode: staffCode,
							code: code
						},
						success: function(data) {
							count = 0;
							sessionStorage.setItem('num', count);
							errorShow(JSON.stringify(data.msg));
							return;
						}
					})
				})
			})
		</script>
	</body>

</html>